<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>

<body>

    <div id="app">
        <p>input 元素：</p>
        <input v-model="message" placeholder="编辑我……">
        <p>input 表单消息是: {{ message }}</p>

        <p>textarea 元素：</p>
        <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
        <p>textarea 表单消息是:</p>
        <p>{{ message2 }}</p>

        <!-- 正确 -->
        <textarea v-model="text"></textarea>

        <p>单个复选框：</p>
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
        <hr>
        <radio-group>
            <input type="radio" id="checkbox" value="男" v-model="is_checked">
            <label for="checkbox1">男</label>
            <input type="radio" id="checkbox" value="女" v-model="is_checked">
            <label for="checkbox2">女</label>
            <input type="radio" id="checkbox" value="未知" v-model="is_checked">
            <label for="checkbox2">女</label>
        </radio-group>

        <p>多个复选框：</p>
        <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
        <label for="runoob">Runoob</label>
        <input type="checkbox" id="google" value="Google" v-model="checkedNames">
        <label for="google">Google</label>
        <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
        <label for="taobao">taobao</label>
        <br>
        <span>选择的值为: {{ checkedNames }}</span>
        <hr>
        <input type="checkbox" v-model="toggle" true-value="yes1" false-value="no1" />
        <div>{{toggle}}</div>
        <hr>
        <input id="xy" type="radio" v-model="pick" v-bind:value="a" />
        <label for="xy">xy</label>
        <div>{{pick}},{{123}}</div>
        <hr>
        <select v-model="sel2">
            <!-- 内联对象字面量 -->
            <option>未知</option>
            <option :value="selected1">上海</option>
            <option :value="selected2">南京</option>
            <option :value="selected3">西藏</option>
        </select>
        <div>{{sel2}}</div>

        <a v-on:click.parent="onSubmit"  href="https://www.baidu.com">百度一下</a>
    </div>

    <script>
        let config = {

            data() {
                return {
                    info: "",
                    message: '',
                    message2: '菜鸟教程\r\nhttps://www.runoob.com',
                    text: '默认值',
                    radioone: '男',
                    is_checked: false,
                    checked: false,
                    checkedNames: [],
                    toggle: '',
                    pick: "",
                    a: "123",
                    selected1: {
                        num: 1234,
                        name: '',
                        addr: '',
                        city: ''
                    },
                    sel2:'',
                    selected2:'2',
                    selected3:'3',

                }
            },
            methods: {
                onSubmit(){
                    alert("234");
                    return true;
                }
            }
        };
        let vm = Vue.createApp(config).mount("#app");

    </script>
</body>

</html>